<!--
 * @Author: panda-hbd 10254515+panda-hbd@user.noreply.gitee.com
 * @Date: 2022-11-13 14:23:25
 * @LastEditors: panda-hbd 1511539537@qq.com
 * @LastEditTime: 2022-11-17 16:23:24
 * @FilePath: \text-online-system2\src\views\CourseDetail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div style="width: 100%">
    <!-- 头部模块 -->
    <el-header id="header">
      <CommonHeader>
        <h3 style="color:var(--balckColor)"  >数据结构</h3>
        <template #T>
          <div class="T" v-if="this.$store.state.userType=='student'">
            <div class="photo"><img src="../assets/logo.png" alt="" /></div>
            <span>谭政</span> <span><el-icon><HomeFilled /></el-icon>Java9</span>
          </div>
          <div class="T" v-if="this.$store.state.userType=='teacher'">
            <span><el-icon><UserFilled /></el-icon><i>0</i>人</span>
            <span><el-icon><Calendar /></el-icon>2022年春季</span>
          </div>
        </template>
        <template #ul>
          <div>
            <ul class="ul-tab" v-if="this.$store.state.userType=='student'">
              <li><router-link :to="{name:'topublicNotice'}" :class="index==1?'actineTab':''" @click="this.index=1">公告</router-link></li>
              <li><router-link :to="{name:'tohomework'}" :class="index==2?'actineTab':''" @click="this.index=2">作业</router-link></li>
              <li><router-link :to="{name:'totest'}" :class="index==3?'actineTab':''" @click="this.index=3">考试</router-link></li>
              <li><router-link :to="{name:'totalk'}" :class="index==4?'actineTab':''" @click="this.index=4">讨论区</router-link></li>
            </ul>
            <ul class="ul-tab" v-if="this.$store.state.userType=='teacher'">
              <li><router-link :to="{name:'topublicNotice'}" :class="index==1?'actineTab':''" @click="this.index=1">公告</router-link></li>
              <li><router-link :to="{name:'totest'}" :class="index==2?'actineTab':''" @click="this.index=2">试卷</router-link></li>
              <li><router-link :to="{name:'tohomework'}" :class="index==3?'actineTab':''" @click="this.index=3">作业</router-link></li>
              <li><router-link :to="{name:'totalk'}" :class="index==4?'actineTab':''" @click="this.index=4">讨论区</router-link></li>
              <li><router-link :to="{name:'manageStudent'}" :class="index==5?'actineTab':''" @click="this.index=5">成员管理</router-link></li>
              <li><router-link :to="{name:'settings'}" :class="index==6?'actineTab':''" @click="this.index=6">设置</router-link></li>
            </ul>
          </div>
        </template>
      </CommonHeader>
    </el-header>
    <!-- 主体内容 -->
    <el-main>
      <router-view></router-view>
    </el-main>
  </div>
</template>

<script>
import CommonHeader from "../components/CommonHeader.vue";

export default {
  name: "CourseDetail",
  component: {
    CommonHeader,
  },
  data() {
    return {
        actineTab:'actineTab',
        index:1
    };
  },
  props: ["title"],
  mounted() {},
  methods: {},
  components: { CommonHeader },
};
</script>

<style scoped>
/* 头部模块样式 start */

.photo {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: #000;
  overflow: hidden;
}
.photo img {
  width: 100%;
  height: 100%;
}
.T {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
}
.T span{
    margin: 0 0.5rem;
    font-size:0.75rem ;
    font-weight: 500;
}
.el-header{
    height: auto;
    padding: 0.8rem 1.5rem 0 1.5rem ;
}
.ul-tab{
    display: flex;
}
.ul-tab li{
    padding: 0.5rem;
}
.ul-tab li a{
    color: rgb(134, 133, 133);
    font-size: 0.875rem;
    padding-bottom: 0.4rem;
}
.actineTab{
    color: var(--blueColor2) !important;
    font-weight: 600;
    border-bottom: 0.125rem solid var(--blueColor2);
}
/* 头部模块样式 end */

.el-main{
  height: 79%;
  padding: 1rem auto;
}
</style>
